<template>
  <section>
    <el-button size="mini" type="text" @click="addItemBtn">新增</el-button>
    <el-table :data="items">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="商品">
        <template slot-scope="scope">
          <el-select v-model="items[scope.$index].goods" placeholder="商品" size="mini" value-key="id">
            <el-option v-for="goods in goodsList" :key="goods.id" :label="goods.title" :value="goods"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="规格">
        <template slot-scope="scope">
          <el-select v-model="items[scope.$index].goodsSku" placeholder="规格" size="mini" value-key="id" @change="handlerSku($event,scope.row)">
            <div v-if="items[scope.$index].goods">
              <el-option v-for="sku in items[scope.$index].goods.goodsSkus" :key="sku.id" :label="sku.props" :value="sku" v-if="items[scope.$index].goods"></el-option>
            </div>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="编码">
        <template slot-scope="scope">
          <span v-if="items[scope.$index].goodsSku"> {{scope.row.sn = items[scope.$index].goodsSku.sn}}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价" width="50px">
        <template slot-scope="scope">
          <span v-if="items[scope.$index].goodsSku"> {{scope.row.price = items[scope.$index].goodsSku.price}}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="150px">
        <template slot-scope="scope">
          <div class="numBox">
            <div  @click='increase(scope.row)' >
              <i  class="el-icon-plus" size="mini" ></i>
            </div>
            <div class="num">
              <el-input v-model="scope.row.num" size="mini"></el-input>
            </div>
            <div  @click='decrease(scope.row)' >
              <i class="el-icon-minus" size="mini"></i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="小计" width="100px">
        <template slot-scope="scope">
          <span v-if="items[scope.$index].goodsSku"> {{scope.row.totalPrice}}</span>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import errHandler from '@/assets/errHandler'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "orderItem",
    props:['items','department'],
    data() {
      return {
        goodsList:null
      }
    },
    created(){
      console.log('items-----',this.items,this.department)
      this.getGoodsList()
    },
    computed:{
    },
    watch:{
    },
    mounted() {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getGoodsList(){
        this.fetch({name:"getMallGoodsList",data:{departmentId:this.department}})
          .then(res=>{
            console.log(res)
            this.goodsList = res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getGoodsSkuList(goodsId){
        this.fetch({name:"getGoodsSkuList",data:{goodsId}})
          .then(res=>{
            console.log(res)
            this.goodsSkus = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addItemBtn(){
        this.items.push({})
      },
      handlerSku(e,row){
        console.log('selSku----',e)
        if(row.num === undefined){
          Vue.set(row,'num',1)
        }
        if(row.price === undefined){
          Vue.set(row,'price',e.price)
        }
        if(row.sn === undefined){
          Vue.set(row,'sn',e.sn)
        }
        row.sn = e.sn
        if(row.totalPrice === undefined){
          Vue.set(row,'totalPrice',row.num*row.price)
        }
        console.log('row---',row)
      },
      increase(row){//增加数量
        row.num +=1
        row.totalPrice +=row.price
      },
      decrease(row){//减少数量
        row.num -=1
        row.totalPrice -=row.price
        if(row.num === 0){
          let index = this.items.findIndex(o => o.id === row.id )
          if(index >=0){
            this.items.splice(index,1)
          }
        }
      },
    }
  }
</script>

<style scoped>
  .numBox{
    /*border: 1px solid crimson;*/
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .num{
    border: 0px solid darkgrey;
    width: 40px;
    margin:0 10px 0 10px;
    text-align: center;
    justify-content: center;
  }
</style>
